<template>
  <el-breadcrumb separator="/" class="breadcrumb-color">
    <el-breadcrumb-item v-for="(title, index) in routemeta" :key="index" >
        <span style="color:black"> {{title}}</span>
      </el-breadcrumb-item>
  </el-breadcrumb>
</template>
<script lang="ts">
import { defineComponent, watch, onMounted, ref,computed } from "vue";
import { useRoute,useRouter } from "vue-router";
import type { RouteRecordRaw,RouteLocationMatched } from "vue-router";
import {useStore} from 'vuex'
export default defineComponent({
  name: "breadcrumb",
  setup() {
    // 获取路由标题
    let routemeta = ref<Array<any>>([]);
    //   获取响应式的当前路由信息
    let route = useRoute();
    // 测试区

      //   刷新时实时获取路由信息
    onMounted(() => {
      getPathMeta();
    });
    // 监听路由变化 及时导航栏更换面包屑
    watch(
      () => route.matched as Array<RouteLocationMatched>,
      (pathMatched: Array<RouteLocationMatched>) => {
        routemeta.value = pathMatched.map((item) => item.meta.title);
      }
    );

    // 获取路由信息
    const getPathMeta = (): void => {
      routemeta.value = route.matched.map((item) => item.meta.title);
    };
  
    return {
      routemeta,
    };
  },
});
</script>
<style scoped lang='less'>
 .el-breadcrumb-item {
    //  background-color: aqua;
     margin-left: 3px;
     background-color: black;
     color: rgb(0, 0, 0);
//    font-weight:bold;
 }

</style>
